<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
    >
      <el-form-item label="项目名称" prop="projectCode">
        <el-select
          @change="changeCode"
          style="width:100%"
          v-model="dataForm.projectCode"
          placeholder="请选择项目"
        >
          <el-option
            v-for="item in optionsprojectId"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="人员名称" prop="personnelIdList">
        <el-select
          style="width:100%;"
          multiple
          collapse-tags
          v-model="dataForm.personnelIdList"
          placeholder="请选择人员"
        >
          <el-option
            v-for="item in optionspersonnelName"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="培训名称" prop="trainingName">
        <el-input
          v-model="dataForm.trainingName"
          placeholder="培训名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="培训类型" prop="trainingType">
        <el-select
          style="width:100%"
          v-model="dataForm.trainingType"
          placeholder="请选择培训类型"
        >
          <el-option
            v-for="item in optionstrainingType"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="培训开始日期" prop="trainingStartDate">
        <el-date-picker
          style="width:100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="dataForm.trainingStartDate"
          type="datetime"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="培训结束日期" prop="trainingEndDate">
        <el-date-picker
          style="width:100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="dataForm.trainingEndDate"
          type="datetime"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="培训教师" prop="teacher">
        <el-input v-model="dataForm.teacher" placeholder="培训人"></el-input>
      </el-form-item>
      <el-form-item label="学时" prop="trainingHours">
        <el-input
          v-model="dataForm.trainingHours"
          placeholder="学时"
        ></el-input>
      </el-form-item>
      <el-form-item label="培训内容" prop="trainingContent">
        <el-input
          v-model="dataForm.trainingContent"
          placeholder="培训内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="培训地点" prop="trainingAddress">
        <el-input
          v-model="dataForm.trainingAddress"
          placeholder="培训地点"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      optionsprojectId: [],
      optionstrainingType: [],
      optionspersonnelName: [],
      dataForm: {
        id: 0,
        projectCode: "",
        trainingName: "",
        trainingType: "",
        trainingStartDate: "",
        trainingEndDate: "",
        teacher: "",
        trainingHours: "",
        trainingContent: "",
        trainingAddress: "",
        personnelIdList: []
      },
      dataRule: {
        projectCode: [
          { required: true, message: "项目不能为空", trigger: "blur" }
        ],
        trainingName: [
          { required: true, message: "培训名称不能为空", trigger: "blur" }
        ],
        trainingType: [
          { required: true, message: "培训类型不能为空", trigger: "blur" }
        ],
        trainingStartDate: [
          { required: true, message: "培训开始日期不能为空", trigger: "blur" }
        ],
        trainingEndDate: [
          { required: true, message: "培训结束日期不能为空", trigger: "blur" }
        ],
        teacher: [
          { required: true, message: "培训人不能为空", trigger: "blur" }
        ],
        trainingHours: [
          { required: true, message: "学时不能为空", trigger: "blur" }
        ],
        trainingContent: [
          { required: true, message: "培训内容不能为空", trigger: "blur" }
        ],
        trainingAddress: [
          { required: true, message: "培训地点不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    changeCode(e) {
      //获取人员
      this.$http({
        url: this.$http.adornUrl(
          `/sys/getParamenters/getPersonnelProfile?projectCode=${e}`
        ),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.optionspersonnelName = data.list;
        }
      });
    },
    // 获取项目
    getCompanyTypes() {
      this.$http({
        url: this.$http.adornUrl(`/sys/getParamenters/getProjectList`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.optionsprojectId = data.list;
        }
      });

      //获取培训类型
      this.$http({
        url: this.$http.adornUrl(`/sys/getParamenters/getTrainingType`),
        method: "get"
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.optionstrainingType = data.list;
        }
      });
    },
    init(id) {
      this.getCompanyTypes();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/sys/btraininginfo/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.projectCode = data.bTrainingInfo.projectCode;
              this.changeCode(data.bTrainingInfo.projectCode)
              this.dataForm.trainingName = data.bTrainingInfo.trainingName;
              this.dataForm.trainingType = data.bTrainingInfo.trainingType;
              this.dataForm.trainingStartDate =
                data.bTrainingInfo.trainingStartDate;
              this.dataForm.trainingEndDate =
                data.bTrainingInfo.trainingEndDate;
              this.dataForm.teacher = data.bTrainingInfo.teacher;
              this.dataForm.trainingHours = data.bTrainingInfo.trainingHours;
              this.dataForm.trainingContent =
                data.bTrainingInfo.trainingContent;
              this.dataForm.trainingAddress =
                data.bTrainingInfo.trainingAddress;
              this.dataForm.personnelIdList =
                data.bTrainingInfo.personnelIdList;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/sys/btraininginfo/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              projectCode: this.dataForm.projectCode,
              trainingName: this.dataForm.trainingName,
              trainingType: this.dataForm.trainingType,
              trainingStartDate: this.dataForm.trainingStartDate,
              trainingEndDate: this.dataForm.trainingEndDate,
              teacher: this.dataForm.teacher,
              trainingHours: this.dataForm.trainingHours,
              trainingContent: this.dataForm.trainingContent,
              trainingAddress: this.dataForm.trainingAddress,
              personnelIdList: this.dataForm.personnelIdList
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
